<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2 v-on 事件绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1> 知识点1:v-on指令 鼠标事件</h1>
        <p>我已经被人点了{{num}}次了</p>
        <button v-on:click="num++">点我+_+</button>
        <button v-on:click="num--">点我-_-</button>
        <h3>许多事件逻辑会更加复杂，所以在复杂的逻辑下，直接吧代码写在V-On中是不合适的</h3>
        <button v-on:click="log()"></button>
        <button v-on:click="log("我是参数")">打印含参数的消息</button>
        <h3>v-on:click 可以简写成@click</h3>
        <button @click="log("马上下课了,好开心啊")">简写形态打印消息</button>
    </div>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                num:0
            }
        },
        methods: {
        log(){
            console.log("你好哈哈哈哈！")

        }
    }

    }).mount("#app")
</script>